<template>
  <div class="swiper">
    <div class="block">
      <el-carousel height="600px">
        <el-carousel-item v-for="item in images" :key="item.index">
            <img :src="item.img" alt="">
        </el-carousel-item>
        <div class="er">
          <div class="er_top">
            VISUAL ANALYSIS
          </div>
          <div class="er_content">
            长三角地区 "碳中和" 战略
          </div>
          <div class="er_footer">
            ——可视化分析系统——
          </div>
          <div class="more">
            <input class="about" type="button" value="了解更多" @click="about">
          </div>
        </div>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
    name:'Swiper',
    data() {
        return {
            images:[
                {
                    img:require('../assets/night.jpg'),
                    
                    title:'1'
                },
                {
                    img:require('../assets/swiper/desert.jpg'),
                    title:'2'
                },
                {
                    img:require('../assets/swiper/iceMountain.jpeg'),
                    title:'3'
                },
                {
                    img:require('../assets/swiper/lake.jpg'),
                    title:'4'
                },
            ]
        }
    },
    methods: {
      about(){
        window.location.href="https://www.163.com/dy/article/G4Q0VCP005509P99.html";
      }
    },
};
</script>

<style lang="scss" scoped>
.el-carousel{
  position: relative;
}
.el-carousel__item img{
    width: 100%;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.er{
  position: absolute;
  z-index: 998;
  color: #fff;
  font-size: 24px;
  left: 28%;
  top: 15%;
  margin: 0 auto;
  /* width: 60%;
  height: 30%; */
  padding:50px 50px ;
  text-align: center;
  background: rgba(0,0,0,0.5);
  .er_top{
    border-top: 3px solid #fff;
    border-bottom: 3px solid #fff;
    
    width: 250px;
    margin: auto;
  }
  .er_content{
    padding: 50px 0 20px 0;
    font-size: 70px;
    text-align: center;
  }
  .er_footer{
    font-size: 40px;
    margin-bottom: 20px;
  }
  .about{
    
        font-weight: lighter;
    text-align: center;
    font-size: 27px;
    margin: auto;
    width: 20%;
    background-color: rgba(0,0,0,0.6);
    color: aliceblue;
    border: 1px solid black;
    cursor: pointer;
  }
}
</style>